{% comment %}
    Renders cart drawer

    Usage:
    {% render 'cart-drawer' %}
{% endcomment %}

<script src="{{ 'cart.js' | asset_url }}" defer="defer"></script>
<script>
  window.addEventListener('pageshow', (e) => {
    if (e.persisted || (window.performance && 
      window.performance.navigation.type == 2)) {
      location.reload()
    }
  }, false)
</script>
<style>
  .drawer {
    visibility: hidden;
  }
  .cart__empty-text {
    color: var(--grey-60, #8D8D8D);
    font-family: Montserrat;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 32px; /* 200% */
  }
  .cart-continue-button {
    padding: 0 96px;
    border-radius: 37px;
    background: var(--unnamed, linear-gradient(180deg, #599BF4 0%, #0D74FF 100%));
  }
  .drawer__inner .drawer__header {
    color: var(--dark, #15182A);
    font-size: 24px;
    font-style: normal;
    line-height: 32px; /* 133.333% */
    border-bottom: 1px solid var(--grey-20, #E6E6E6);
    padding: 12px 10px 12px 36px;
    align-items: center;
    gap: 10px;
  }
  .cart-drawer .drawer__heading {
    color: var(--dark, #15182A);
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 32px; /* 160% */
    letter-spacing: 0;
  }
  .drawer__inner .drawer__header.is_empty {
    margin-bottom: 40px;
  }
  .drawer__inner .cart-drawer-items {
    padding: 0 1.5rem;
  }
  
  .product-option-container {
    display: flex;
    margin-top: 5px;
  }
  .cart-drawer__footer {
    margin: 20px 0;
  }
  .cart-drawer__footer .totals__subtotal {
    color: var(--dark, #15182A);
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px; /* 150% */
  }
  
  .discount-summary {
    color: #000;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px; /* 157.143% */
  }
  .totals__subtotal-value .total-price {
    color: #000;
    text-align: center;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 120% */
  }
  .cart__ctas .drawer-cart-button {
    border-radius: 56px;
    background: var(--unnamed, linear-gradient(180deg, #599BF4 0%, #0D74FF 100%));
    padding: 12px 0;
  }
  .cart-drawer .totals__subtotal-value .old-compare-price, .cart-drawer .cart-item__price-wrapper {
    text-align: right;
  }
  .totals__subtotal-value .old-compare-price, .cart-item__price-wrapper .old-compare-price {
    color: var(--grey-60, #8D8D8D);
  }
  .cart-drawer-items .cart-item__quantity-wrapper quantity-input.quantity {
    min-height: calc((var(--inputs-border-width) * 2) + 3.0rem);
    width: 100px;
    border-radius: 4px;
    border: 1px solid var(--grey-40, #CCC);
  }
  .cart-drawer-items .cart-item__quantity-wrapper .quantity__button {
    width: calc(2.5rem / var(--font-body-scale));
  }
  .cart-drawer-items cart-remove-button .button {
    margin-left: 8px;
    min-height: 3.0rem;
    min-width: 3.0rem;
    height: 30px;
    width: 30px;
  }
  .cart-drawer-items .cart-item cart-remove-button {
    margin: 0;
  }
  .cart-drawer .cart-items .cart-item__totals {
    padding-top: 0;
  }
  .cart-drawer-items .cart-item__image {
    width: 11rem;
  }
  .cart-drawer-items .cart-item__error {
    margin-top: 0;
  }
  .cart-item__details .discounts__discount {
    color: #5999F1;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px; /* 157.143% */
  }
  .cart-item__details .cart-item__name {
    color: var(--dark, #15182A);
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px; /* 125% */
    letter-spacing: 0;
  }
  .cart-drawer .drawer__close path {
    stroke: #000;
  }
  .cart-drawer .drawer__close svg {
    height: 2.4rem;
    width: 2.4rem;
  }
  .cart-drawer .drawer__close {
    display: inline-block;
    padding: 0;
    min-width: 4.4rem;
    min-height: 4.4rem;
    box-shadow: 0 0 0 0.2rem rgba(var(--color-button), 0);
    position: absolute;
    top: 10px;
    right: 28px;
    color: rgb(var(--color-foreground));
    background-color: transparent;
    border: none;
    cursor: pointer;
  }
  .cart-drawer .final-line-price {
    color: var(--dark, #15182A);
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 120% */
    text-align: left;
  }
  .cart-drawer cart-remove-button .icon-remove {
    height: 1.8rem;
    width: 1.8rem;
    color: #ccc;
  }
  .cart-drawer .drawer__footer {
    padding: 0 3.6rem 2.0rem;
  }
  .drawer-cart-item__details {
    display: flex;
    gap: 5px;
  }
  .drawer-cart-item__details .drawer-cart-item__totals {
    margin-top: 0;
  }
  .drawer-cart-item__details .cart-item__price-wrapper .price.old-compare-price {
    margin-top: 10px;
  }
  .cart-item__details-product-info {
    flex: 1;
  }
  .drawer-cart-item__totals .cart-item__discounted-prices {
    display: flex;
    flex-direction: column;
  }
  .cart-drawer .cart-item .loading-overlay {
    padding-top: 0;
    width: 100%;
    height: 100%;
    background: #fff;
  }
  .cart-drawer__footer {
    position: relative;
  }
  .cart-drawer__footer .totals__subtotal-value {
    position: absolute;
    top: 2px;
    right: 0;
    margin-top: 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
  }
  
  /***common**/
  .ibv {
    display: inline-block !important;
    vertical-align: middle !important;
  }
  /***common**/
  
  @media screen and (min-width: 750px) {
    .cart-item__props-containers {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 5px;
    }
    
    .cart-drawer .cart-item .cart-item__quantity, .cart-drawer .cart-items .cart-items__heading--wide {
      padding-left: 0;
    }
  }
  .cart-item__containers {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 10rem;
  }
  
  .cart-drawer .cart-item__price-wrapper .cart-item__discounted-prices {
    line-height: 24px;
    padding: 0;
  }
  .cart-drawer-error {
    font-size: 12px;
    color: #f83c3c;
  }
  .cart-drawer .discounts {
    margin-top: 5px;
    font-size: 1.4rem; 
  }
  .totals__save-summary {
    line-height: 1;
  }
  .drawer-cart-link {
    color: var(--web-primary-color-100, #2F80ED);
    text-align: center;
    font-family: Montserrat;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px; /* 150% */
    text-decoration: none;
  }
  .drawer-checkout-overlay__spinner svg {
    display: block;
    margin-left: 2px;
  }
  
  @media screen and (max-width: 750px) {
    .drawer-cart-item__details {
      gap: 0;
      flex-direction: column;
    }
    .drawer-cart-item__details .cart-item__price-wrapper .price.old-compare-price {
      margin: 0;
    }
    .drawer-cart-item__totals .cart-item__discounted-prices {
      display: block;
    }
    .cart-drawer .totals__subtotal-value .old-compare-price, .cart-drawer .cart-item__price-wrapper {
      text-align: left;
    }
    .cart-drawer .cart-item__price-wrapper .cart-item__discounted-prices {
      line-height: 1;
    }
    .cart-drawer__footer .totals__subtotal-value {
      flex-direction: row;
      align-items: center;
      gap: 2px;
    }
    .cart-drawer .cart-items .cart-item__totals {
      padding: 1.2rem 0;
      text-align: left;
    }
    .cart-drawer .cart-items .cart-item__totals .price {
      justify-content: flex-start;
    }
  }
</style>
<cart-drawer class="drawer{% if cart == empty %} is-empty{% endif %}">
  <div id="CartDrawer" class="cart-drawer">
    <div id="CartDrawer-Overlay"class="cart-drawer__overlay"></div>
    <div class="drawer__inner" role="dialog" aria-modal="true" aria-label="{{ 'sections.cart.title' | t }}" tabindex="-1">
       {%- if cart == empty -%}
        <div class="drawer__header is_empty">
          <h2 class="drawer__heading drawer__heading-customize ">{{ 'sections.cart.title' | t }} (0)</h2>
        </div>
        <div class="drawer__inner-empty">
          <div class="cart-drawer__warnings center">
            <div class="cart-drawer__empty-content">
              <div>{{ settings.empty_cart_icon }}</div>
              <h2 class="cart__empty-text">{{ 'sections.cart.empty' | t }}</h2>
              <button class="drawer__close" type="button" onclick="this.closest('cart-drawer').close()" aria-label="{{ 'accessibility.close' | t }}">{% render 'icon-close' %}</button>
                <a href="{% if settings.continue_collection %}{{ settings.continue_collection.url }}{% endif %}" class="button cart-continue-button">
                  {{ settings.continue_button }}
                </a>
            </div>
          </div>
        </div>
        {% if settings.recommandation_show == true %}
          {%- render 'cart-recommendation' -%}
        {% endif %}
      {%- endif -%}
      {%- if cart != empty -%}
        <div class="drawer__header">
          <h2 class="drawer__heading">{{ 'sections.cart.title' | t }} ({{ cart.item_count }})</h2>
          <button class="drawer__close" type="button" onclick="this.closest('cart-drawer').close()" aria-label="{{ 'accessibility.close' | t }}">{% render 'icon-close' %}</button>
        </div>
        <cart-drawer-items class="{% if cart == empty %}is-empty{% endif %} cart-drawer-items">
          <form action="{{ routes.cart_url }}" id="CartDrawer-Form" class="cart__contents cart-drawer__form" method="post">
            <div id="CartDrawer-CartItems" class="drawer__contents js-contents">
              {%- if cart != empty -%}
                <div class="drawer__cart-items-wrapper">
                  <table class="cart-items" role="table">
                    <tbody role="rowgroup">
                      {%- for item in cart.items -%}
                        <tr id="CartDrawer-Item-{{ item.index | plus: 1 }}" class="cart-item" role="row">
                          <td class="cart-item__media" role="cell" headers="CartDrawer-ColumnProductImage">
                            {% if item.image %}
                              {% comment %} Leave empty space due to a:empty CSS display: none rule {% endcomment %}
                              <a href="{{ item.url }}" class="cart-item__link" tabindex="-1" aria-hidden="true"> </a>
                              <img class="cart-item__image"
                                src="{{ item.image | image_url: width: 300 }}"
                                alt="{{ item.image.alt | escape }}"
                                loading="lazy"
                                width="150"
                                height="{{ 150 | divided_by: item.image.aspect_ratio | ceil }}"
                              >
                            {% endif %}
                          </td>
                          <td>
                            <div class="cart-item__containers">
                              <div class="cart-item__details drawer-cart-item__details" role="cell" headers="CartDrawer-ColumnProduct">
                                <div class="cart-item__details-product-info">
                                  <a href="{{ item.url }}" class="cart-item__name h4 break">{{ item.product.title | escape }}</a>
                                  {%- if item.product.has_only_default_variant == false or item.properties.size != 0 or item.selling_plan_allocation != nil -%}
                                    <ul class="product-option-container">
                                      {%- if item.product.has_only_default_variant == false -%}
                                        {%- for option in item.options_with_values -%}
                                          <li class="product-option">
                                            <span>{{ option.value }}{% unless forloop.last %}/ {% endunless %}</span>
                                          </li>
                                        {%- endfor -%}
                                      {%- endif -%}
                                    </ul>
                                  {%- endif -%}

                                  <ul class="discounts list-unstyled" role="list" aria-label="{{ 'customer.order.discount' | t }}">
                                    {%- for discount in item.discounts -%}
                                      <li class="discounts__discount">
                                        >> {{ discount.title }}
                                      </li>
                                    {%- endfor -%}
                                  </ul>
                                </div>
                                <div class="cart-item__totals drawer-cart-item__totals" role="cell" headers="CartDrawer-ColumnTotal">
                                  <div class="loading-overlay hidden">
                                    <div class="loading-overlay__spinner">
                                      <svg aria-hidden="true" focusable="false" role="presentation" class="spinner" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
                                        <circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
                                      </svg>
                                    </div>
                                  </div>
                                  <div class="cart-item__price-wrapper">
                                    {%- liquid
                                      assign target = item.variant
                                      assign compare_at_price = target.compare_at_price
                                      # exist compare_at_price and when show_compare_price is set to true
                                      if compare_at_price and show_compare_price == true
                                        assign compare_total_price = compare_at_price | times: item.quantity
                                      else
                                        assign compare_total_price = item.original_line_price
                                      endif
                                    -%}
                                    {%- if compare_total_price != item.final_line_price -%}
                                      <div class="cart-item__discounted-prices">
                                        <span class="visually-hidden">
                                          {{ 'products.product.price.sale_price' | t }}
                                        </span>
                                        <span class="price price--end final-line-price ibv">
                                          {{ item.final_line_price | money }}
                                        </span>
                                        <span class="visually-hidden">
                                          {{ 'products.product.price.regular_price' | t }}
                                        </span>
                                        <s class="cart-item__old-price price price--end old-compare-price ibv">
                                          {{ compare_total_price | money }}
                                        </s>
                                      </div>
                                    {%- else -%}
                                      <span class="price price--end final-line-price">
                                        {{ compare_total_price | money }}
                                      </span>
                                    {%- endif -%}

                                    {%- if item.variant.available and item.unit_price_measurement -%}
                                      <div class="unit-price caption">
                                        <span class="visually-hidden">{{ 'products.product.price.unit_price' | t }}</span>
                                        {{ item.variant.unit_price | money }}
                                        <span aria-hidden="true">/</span>
                                        <span class="visually-hidden">&nbsp;{{ 'accessibility.unit_price_separator' | t }}&nbsp;</span>
                                        {%- if item.variant.unit_price_measurement.reference_value != 1 -%}
                                          {{- item.variant.unit_price_measurement.reference_value -}}
                                        {%- endif -%}
                                        {{ item.variant.unit_price_measurement.reference_unit }}
                                      </div>
                                    {%- endif -%}
                                  </div>
                                </div>
                              </div>
                              <div class="cart-item__props-containers">
                                <div class="cart-item__quantity" role="cell" headers="CartDrawer-ColumnQuantity">
                                  <div class="cart-item__quantity-wrapper">
                                    <quantity-input class="quantity">
                                      <button class="quantity__button no-js-hidden" name="minus" type="button">
                                        <span class="visually-hidden">{{ 'products.product.quantity.decrease' | t: product: item.product.title | escape }}</span>
                                        {% render 'icon-minus' %}
                                      </button>
                                      <input class="quantity__input"
                                        type="number"
                                        name="updates[]"
                                        value="{{ item.quantity }}"
                                        min="0"
                                        aria-label="{{ 'products.product.quantity.input_label' | t: product: item.product.title | escape }}"
                                        id="Drawer-quantity-{{ item.index | plus: 1 }}"
                                        data-index="{{ item.index | plus: 1 }}"
                                      >
                                      <button class="quantity__button no-js-hidden" name="plus" type="button">
                                        <span class="visually-hidden">{{ 'products.product.quantity.increase' | t: product: item.product.title | escape }}</span>
                                        {% render 'icon-plus' %}
                                      </button>
                                    </quantity-input>

                                    <cart-remove-button id="CartDrawer-Remove-{{ item.index | plus: 1 }}" data-index="{{ item.index | plus: 1 }}">
                                      <button class="button button--tertiary" aria-label="{{ 'sections.cart.remove_title' | t: title: item.title }}">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
                                          <path d="M4.375 4.25C3.82272 4.25 3.375 4.69772 3.375 5.25V16C3.375 16.5523 3.82272 17 4.375 17H13.625C14.1773 17 14.625 16.5523 14.625 16V5.25C14.625 4.69772 14.1773 4.25 13.625 4.25H4.375Z" stroke="#8D8D8D" stroke-width="1.5" stroke-linejoin="round"/>
                                          <path d="M7.5 8V12.875" stroke="#8D8D8D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                          <path d="M10.5 8V12.875" stroke="#8D8D8D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                          <path d="M1.5 4.25H16.5" stroke="#8D8D8D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                          <path d="M6 4.25L7.23337 2H10.7914L12 4.25H6Z" stroke="#8D8D8D" stroke-width="1.5" stroke-linejoin="round"/>
                                        </svg>
                                      </button>
                                    </cart-remove-button>
                                  </div>
                                </div>
                              </div>
                              <div id="CartDrawer-LineItemError-{{ item.index | plus: 1 }}" class="cart-item__error" role="alert">
                                <small class="cart-item__error-text"></small>
                                <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-error" viewBox="0 0 13 13">
                                  <circle cx="6.5" cy="6.50049" r="5.5" stroke="white" stroke-width="2"/>
                                  <circle cx="6.5" cy="6.5" r="5.5" fill="#EB001B" stroke="#EB001B" stroke-width="0.7"/>
                                  <path d="M5.87413 3.52832L5.97439 7.57216H7.02713L7.12739 3.52832H5.87413ZM6.50076 9.66091C6.88091 9.66091 7.18169 9.37267 7.18169 9.00504C7.18169 8.63742 6.88091 8.34917 6.50076 8.34917C6.12061 8.34917 5.81982 8.63742 5.81982 9.00504C5.81982 9.37267 6.12061 9.66091 6.50076 9.66091Z" fill="white"/>
                                  <path d="M5.87413 3.17832H5.51535L5.52424 3.537L5.6245 7.58083L5.63296 7.92216H5.97439H7.02713H7.36856L7.37702 7.58083L7.47728 3.537L7.48617 3.17832H7.12739H5.87413ZM6.50076 10.0109C7.06121 10.0109 7.5317 9.57872 7.5317 9.00504C7.5317 8.43137 7.06121 7.99918 6.50076 7.99918C5.94031 7.99918 5.46982 8.43137 5.46982 9.00504C5.46982 9.57872 5.94031 10.0109 6.50076 10.0109Z" fill="white" stroke="#EB001B" stroke-width="0.7">
                                </svg>
                              </div>
                            </div>
                          </td>
                        </tr>
                      {%- endfor -%}
                    </tbody>
                  </table>
                </div>
              {%- endif -%}
              <p id="CartDrawer-LiveRegionText" class="visually-hidden" role="status"></p>
              <p id="CartDrawer-LineItemStatus" class="visually-hidden" aria-hidden="true" role="status">{{ 'accessibility.loading' | t }}</p>
            </div>
            <div id="CartDrawer-CartErrors" class="cart-drawer-error" role="alert"></div>
          </form>
          {% if settings.recommandation_show == true %}
            <div class="drawer-recommandation">
              {%- render 'cart-recommendation' -%}
            </div>
          {% endif %}
        </cart-drawer-items>
        <div class="drawer__footer">
          {%- if settings.show_cart_note -%}
            <details id="Details-CartDrawer">
              <summary>
                <span class="summary__title">
                  {{ 'sections.cart.note' | t }}
                  {% render 'icon-caret' %}
                </span>
              </summary>
              <cart-note class="cart__note field">
                <label class="visually-hidden" for="CartDrawer-Note">{{ 'sections.cart.note' | t }}</label>
                <textarea id="CartDrawer-Note" class="text-area text-area--resize-vertical field__input" name="note" placeholder="{{ 'sections.cart.note' | t }}">{{ cart.note }}</textarea>
              </cart-note>
            </details>
          {%- endif -%}

          <!-- Start blocks-->
          <!-- Subtotals-->

          <div class="cart-drawer__footer" {{ block.shopify_attributes }}>
            <div class="totals" role="status">
              <h2 class="totals__subtotal">{{ 'sections.cart.subtotal' | t }}</h2>
            </div>
            {%- liquid
              assign all_compare_total_price = 0
              assign all_compare_discount = 0
              
              for item in cart.items
                if item.variant.compare_at_price and show_compare_price == true
                  assign compare_at_price = item.variant.compare_at_price
                else
                  assign compare_at_price = item.original_price
                endif
                
                assign compare_total_price = compare_at_price | times: item.quantity
                assign all_compare_total_price = all_compare_total_price | plus: compare_total_price
              endfor
              
              assign all_compare_discount = all_compare_total_price |  minus: cart.original_total_price
            -%}
            <div class="discount-summary">
              {%- if cart.cart_level_discount_applications.size > 0 -%}
                <ul class="discounts list-unstyled" role="list" aria-label="{{ 'customer.order.discount' | t }}">
                  {%- for discount in cart.cart_level_discount_applications -%}
                    <li class="discounts__discount discounts__discount--end">
                      {%- render 'icon-discount' -%}
                      {{ discount.title }}
                      (-{{ discount.total_allocated_amount | money }})
                    </li>
                  {%- endfor -%}
                </ul>
              {%- endif -%}
              {%  assign total_amount_price = cart.total_discount | plus: all_compare_discount %}
              <div class="totals__save-summary">
                {%- comment -%} >> {{ settings.save_desc }}  {{ cart.total_discount | plus: all_compare_discount | money }} {%- endcomment -%}
                <small class="tax-note caption-large rte">
                  {%- if cart.taxes_included and shop.shipping_policy.body != blank -%}
                    {{ 'sections.cart.taxes_included_and_shipping_policy_html' | t: link: shop.shipping_policy.url }}
                  {%- elsif cart.taxes_included -%}
                    {{ 'sections.cart.taxes_included_but_shipping_at_checkout' | t }}
                  {%- elsif shop.shipping_policy.body != blank -%}
                    {{ 'sections.cart.taxes_and_shipping_policy_at_checkout_html' | t: link: shop.shipping_policy.url }}
                  {%- else -%}
                    {{ 'sections.cart.taxes_and_shipping_at_checkout' | t }}
                  {%- endif -%}
                </small>
              </div>
            </div>
            <div class="totals__subtotal-value">
              <span class="price price--end total-price">{{ cart.total_price | money }}</span>
              {%  if all_compare_total_price > cart.total_price %}
                <s class="price price--end old-compare-price">{{ all_compare_total_price | money }}</s>
              {% endif %}
            </div>
          </div>

          <!-- CTAs -->

          <div class="cart__ctas" {{ block.shopify_attributes }}>
            <noscript>
              <button type="submit" class="cart__update-button button button--secondary" form="CartDrawer-Form">
                {{ 'sections.cart.update' | t }}
              </button>
            </noscript>

            <button type="submit" id="CartDrawer-Checkout" class="cart__checkout-button button drawer-cart-button" name="checkout" form="CartDrawer-Form"{% if cart == empty %} disabled{% endif %}>
              {{ 'sections.cart.checkout' | t }}
              <div class="loading-overlay__spinner drawer-checkout-overlay__spinner hidden">
                <svg width="18" height="18" aria-hidden="true" focusable="false" role="presentation" class="spinner" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
                  <circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
                </svg>
              </div>
            </button>
            
            <a href="{% if settings.shop_desc %}{{ settings.continue_collection.url }}{% endif %}" class="link drawer-cart-link">
              {{ settings.shop_desc }}
            </a>
          </div>
        </div>
      {% endif %}
    </div>
  </div>
</cart-drawer>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    function isIE() {
      const ua = window.navigator.userAgent;
      const msie = ua.indexOf('MSIE ');
      const trident = ua.indexOf('Trident/');

      return (msie > 0 || trident > 0);
    }

    if (!isIE()) return;
    const cartSubmitInput = document.createElement('input');
    cartSubmitInput.setAttribute('name', 'checkout');
    cartSubmitInput.setAttribute('type', 'hidden');
    document.querySelector('#cart').appendChild(cartSubmitInput);
    document.querySelector('#checkout').addEventListener('click', function(event) {
      document.querySelector('#cart').submit();
    });
  });
</script>
